<h1 mat-dialog-title>Select Files from Repository</h1>

<div mat-dialog-content class="file-tree-dialog-content" style="max-height: 60vh; overflow-y: auto;">
    <mat-form-field appearance="outline" class="w-full mb-4 sticky top-0 bg-white z-10 dark:bg-gray-800">
        <mat-label>Filter files and folders</mat-label>
        <input matInput [formControl]="filterControl" placeholder="e.g., component.ts or my-folder" data-testid="file-tree-filter-input">
        <button *ngIf="filterControl.value" matSuffix mat-icon-button aria-label="Clear" (click)="filterControl.setValue('')" data-testid="file-tree-filter-clear">
            <mat-icon>close</mat-icon>
        </button>
    </mat-form-field>

    <p *ngIf="!data.rootNode || originalDataSourceData.length === 0" class="text-gray-500 italic" data-testid="no-file-tree-data">
      No file tree data available to display.
    </p>
    <p *ngIf="data.rootNode && originalDataSourceData.length > 0 && dataSource.data.length === 0 && filterControl.value" class="text-gray-500 italic" data-testid="no-filter-results">
      No files or folders match your filter "{{filterControl.value}}".
    </p>

    <mat-tree *ngIf="dataSource.data.length > 0" [dataSource]="dataSource" [treeControl]="treeControl" class="file-tree">
    <!-- Node template for expandable (directory) nodes -->
    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
      <li>
        <div class="mat-tree-node flex items-center">
          <button mat-icon-button matTreeNodeToggle
                  [attr.aria-label]="'Toggle ' + node.name">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          <mat-icon class="mr-1">{{ getNodeIcon(node) }}</mat-icon>
          <span class="truncate">{{node.name}}</span>
        </div>
        <ul [class.file-tree-invisible]="!treeControl.isExpanded(node)" style="padding-left: 20px;">
          <ng-container matTreeNodeOutlet></ng-container>
        </ul>
      </li>
    </mat-nested-tree-node>
    <!-- Node template for leaf (file) nodes -->
    <mat-tree-node *matTreeNodeDef="let node">
      <li>
        <div class="mat-tree-node flex items-center">
          <span style="width: 20px;"></span> <!-- Adjusted Indentation spacer -->
          <mat-checkbox
              *ngIf="isFile(node)"
              class="mr-2 tree-node-checkbox"
              [checked]="isFileSelected(node)"
              (change)="toggleFileSelection(node)"
              (click)="$event.stopPropagation()"
              aria-label="Select file">
              <!-- stopPropagation to prevent node expansion/collapse if checkbox is on the same line as toggle -->
          </mat-checkbox>
          <span *ngIf="!isFile(node)" style="width: 24px; margin-right: 8px;"></span> <!-- Spacer for directory alignment if checkbox not present -->
          <mat-icon class="mr-1">{{ getNodeIcon(node) }}</mat-icon>
          <span class="truncate">{{node.name}}</span>
        </div>
      </li>
    </mat-tree-node>
  </mat-tree>
</div>

<div mat-dialog-actions align="end">
  <button mat-button (click)="onCancelClick()">Cancel</button>
  <button mat-raised-button color="primary" (click)="onSelectClick()" [disabled]="selection.isEmpty()" cdkFocusInitial>Select</button>
</div>

<style>
  .file-tree-invisible { display: none; }
  .truncate {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%; /* Or a specific width */
  }
</style>
